<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: components/fileList/fileList.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: components/fileList/fileList.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
&lt;div class="app-file-list">
	&lt;div class="app-file-list-item" v-for="item,j in list" @click="handleClick(item)">
		&lt;a v-if="!(gallery&amp;&amp;item.src&amp;&amp;item.thumb)" class="app-file-list-item-icon" :class="'app-fileicon-'+matchType(item.ext||item.name.match(/\.(\w+)$/)[1])" :href="item.src||'javascript:;'">
			&lt;img v-if="!!item.thumb" :src="item.thumb" @load="setImgSize">
			&lt;span class="app-fileicon-video-start" v-if="item.thumb&amp;&amp;matchType(item.ext||item.name.match(/\.(\w+)$/)[1])=='video'">&lt;/span>
		&lt;/a>
    &lt;v-img v-else class="app-file-list-item-icon" :class="'app-fileicon-'+matchType(item.ext||item.name.match(/\.(\w+)$/)[1])" :src="item.src||'javascript:;'" :thumb="item.thumb" :group="'gallery'+hashNum" :title="item.name" @load="setImgSize">
      &lt;span class="app-fileicon-video-start" v-if="item.thumb&amp;&amp;matchType(item.ext||item.name.match(/\.(\w+)$/)[1])=='video'">&lt;/span>
    &lt;/v-img> 
		&lt;div class="app-file-list-item-name">{{item.name}}&lt;/div>
	&lt;/div>
&lt;/div>
&lt;/template>

&lt;script>
/**
 * 文件列表模块
 * @module components/fileList
 * @requires jquery
 * @requires libs/fancybox
 * @param {Array} list 文件data数组
 * @param {Boolean} gallery=true 是否要启用图片查看
 * @example
 *&lt;app-file-list :list="[{name:'文件1.doc',ext:'doc',src:'',thumb:'x.png'}]">&lt;/app-file-list>
  //其中name为文件名，ext为扩展名，src为文件链接、原图地址，thumb为缩略图地址
 */
  export default {
 		name: 'app-file-list',
    data:function() {
      return {
      	hashNum:new Date().getTime()
      }
    },
    props:{
    	list:{
    		'type':Array,
    		'default':function(){return []}
    	},
    	gallery:{
    		'type':Boolean,
    		'default':true
    	}
    },
    mounted:function() {
    },
    methods:{
    	handleClick (fileData){
    		this.$emit('click',fileData);
    	},
    	matchType (ext){
    		switch (ext) {
					case 'png': case 'gif': case 'jpg': case 'jpeg': case 'bmp':
						return 'img';
					case 'doc': case 'docx': case 'wps':
						return 'doc';
					case 'ppt': case 'pptx': case 'dps':
						return 'ppt';
					case 'xls': case 'xlsx': case 'et':
						return 'xls';
					case 'pdf':
						return 'pdf';
					case 'txt':
						return 'txt';
					case 'rar': case 'zip':
						return 'rar';
					case '3gp': case 'mp4': case 'ogg': case 'webm': case 'avi': case 'mpv2': case 'mpg': case 'mpe': case 'mpeg': case 'rmvb': case 'rm': case 'asf': case 'divx': case 'wmv': case 'mkv': case 'vob': case 'flv': case 'ogm': case 'qt':
						return 'video';
					default:
						return 'other';
		   	}
    	},
      setImgSize (event){
        event.target.style.height='auto'
        event.target.style.width='auto'
        if (event.target.clientWidth>=event.target.parentNode.clientWidth&amp;&amp;event.target.clientHeight>=event.target.parentNode.clientHeight) {
            if (event.target.clientWidth>event.target.clientHeight) {
                event.target.style.height='100%'
            }else{
                event.target.style.width='100%'
            }
        }
      }
    }
  }
&lt;/script>

&lt;style>
.app-file-list:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.app-file-list-item{float: left;width: 86px;height: 86px;float: left;margin: 3px;text-align: center;position: relative;}
.app-file-list-item-icon{display: block; position: relative;margin: 5px auto 0;width:56px;height:56px;overflow: hidden;cursor: pointer;background-repeat:no-repeat;background-position:center center;background-image: url(./fileicon-large-default.png);}
.app-file-list-item-icon img{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%)}
.app-file-list-item-name{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden;word-wrap:normal; margin: 4px 3px 3px; cursor: pointer; font-size: 12px;}

.app-fileicon-other{background-image: url(./fileicon-large-default.png);}
.app-fileicon-doc{background-image: url(./fileicon-large-doc.png);}
.app-fileicon-ppt{background-image: url(./fileicon-large-ppt.png);}
.app-fileicon-xls{background-image: url(./fileicon-large-xls.png);}
.app-fileicon-pdf{background-image: url(./fileicon-large-pdf.png);}
.app-fileicon-txt{background-image: url(./fileicon-large-txt.png);}
.app-fileicon-rar{background-image: url(./fileicon-large-rar.png);}
.app-fileicon-video{background-image: url(./fileicon-large-video.png);}
.app-fileicon-video-start{display: inline-block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: url(./fileicon-large-video-overlay.png) no-repeat center center;background-color: rgba(0,0,0,0.4);}
&lt;/style>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-components_appCalendar.html">components/appCalendar</a></li><li><a href="module-components_appLoading.html">components/appLoading</a></li><li><a href="module-components_appUserBox.html">components/appUserBox</a></li><li><a href="module-components_editImage.html">components/editImage</a></li><li><a href="module-components_fileList.html">components/fileList</a></li><li><a href="module-components_menuNava_menuNava.html">components/menuNava/menuNava</a></li><li><a href="module-components_menuNava_menuNavaItem.html">components/menuNava/menuNavaItem</a></li><li><a href="module-components_myInputPage.html">components/myInputPage</a></li><li><a href="module-components_mySelectPage.html">components/mySelectPage</a></li><li><a href="module-components_myWebuploader.html">components/myWebuploader</a></li><li><a href="module-components_textImgBox.html">components/textImgBox</a></li><li><a href="module-components_timeline_timeline.html">components/timeline/timeline</a></li><li><a href="module-components_timeline_timelineItem.html">components/timeline/timelineItem</a></li><li><a href="module-components_vImg.html">components/vImg</a></li><li><a href="module-scripts_common.html">scripts/common</a></li><li><a href="module-scripts_configValid.html">scripts/configValid</a></li><li><a href="module-scripts_LunarCalendar.html">scripts/LunarCalendar</a></li><li><a href="module-scripts_vueMethods.html">scripts/vueMethods</a></li><li><a href="module-services.html">services</a></li><li><a href="module-services_AnniversaryService.html">services/AnniversaryService</a></li><li><a href="module-services_ArchiveService.html">services/ArchiveService</a></li><li><a href="module-services_BigEventService.html">services/BigEventService</a></li><li><a href="module-services_FamilyService.html">services/FamilyService</a></li><li><a href="module-services_UserService.html">services/UserService</a></li><li><a href="module-vuex-history.html">vuex-history</a></li><li><a href="module-vuex-loading.html">vuex-loading</a></li><li><a href="module-vuex-toast.html">vuex-toast</a></li></ul><h3>Namespaces</h3><ul><li><a href="Vue.html">Vue</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on Fri Jun 30 2017 09:20:36 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
